<template>
    
    <!--1.布局组件 -->
   <el-container>
        <!--1.1 侧边菜单栏 -->
         <el-aside width="200px">
               <Menu></Menu>
         </el-aside>
         
         <el-container>
               <!--1.2 头部 -->
               <el-header>
                  <!--头部标签 -->
                  <TopHeader />
               </el-header>
                
               <!--1.3 中间内容区域 -->
               <el-main>

                  <!--页签组件 -->
                  <TabsLayout/>    
                   
                  <!--路由页面 -->
                  <RouterView/>
               </el-main>
         </el-container>
   </el-container>
</template>

<script setup>
import Menu from '@/components/navMenu/Menu.vue';
import TopHeader from '@/components/TopHeader/TopHeader.vue';
import TabsLayout from "@/layouts/TabsLayout.vue"

</script>


<style lang="less" scoped>
   //1.左边菜单栏的基本样式(最主要是,高度铺满屏幕,也就是height: 100vh;)
   .el-aside{
      height: 100vh;
      background-color: white;
      box-shadow: 10px 0 8px -2px rgba(0, 0, 0, 0.2);
   }


   //2.中间内容区域的样式(最主要的是,内容区域给一个固定的高度,超出的话,已滚动条的形式)
   .el-main{
      height: 80vh;
      overflow: auto;
   }


   //3.顶部的样式(最主要是,去掉padding)
   .el-header{
     padding: 0 !important;
   }
</style>